<script lang="ts" name="Search" setup>
import { ColumnsTypes } from '@/components/ProTable/types'
import { isChildComponent } from '@/utils'

interface ProSearchProps {
  searchModel: any
  searchColumns: ColumnsTypes[]
  span: number
  search: () => void
  reset: () => void
}

const props = withDefaults(defineProps<ProSearchProps>(), {
  searchModel: {},
  searchColumns: () => [],
  span: 6
})

const expand = ref<boolean>(false)
const expandCount = computed((): number => 24 / props.span)

// const isAuto = computed(() => {
//   const length = props.searchColumns?.length || 0
//   if (length > expandCount) {
//   }
// })

const emits = defineEmits(['update:searchModel'])

const searchModel = computed({
  get: () => props.searchModel,
  set: (val) => emits('update:searchModel', val)
})
</script>

<template>
  <div class="search_card">
    <el-form
      v-if="searchModel"
      ref="searchModelRef"
      :model="searchModel"
      label-position="top"
      class="search_form"
    >
      <el-row :gutter="16" class="search_item">
        <el-col
          v-for="(item, index) in searchColumns"
          v-show="expand || index + 1 <= expandCount"
          :key="index"
          :span="props.span"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <component
              :is="`el-${item.type}`"
              v-bind="item.attrs"
              v-model="searchModel[item.prop!]"
            >
              <template v-if="item?.children?.length">
                <template v-for="(child, i) in item.children" :key="i">
                  <component
                    v-bind="child.attrs"
                    :is="`el-${isChildComponent(item.type!)}`"
                    :label="child.label"
                    :value="child.value"
                  />
                </template>
              </template>
            </component>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        justify="end"
        class="search_btns"
        :class="{ expend: searchColumns.length >= expandCount }"
      >
        <el-col :span="24" :style="{ textAlign: 'right' }">
          <el-button type="primary" @click="search"> 查询 </el-button>
          <el-button class="rest_btn" @click="reset"> 清空 </el-button>
          <el-button
            v-if="searchColumns.length > expandCount"
            class="expend_btn flex jcc"
            link
            @click="expand = !expand"
            >{{ expand ? '收起' : '展开'
            }}<el-icon
              ><component :is="expand ? 'ArrowUp' : 'ArrowDown'" /></el-icon
          ></el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <el-divider class="table_header_line" />
</template>

<style lang="less" scoped>
.search_card {
  width: 100%;

  .search {
    &_form {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    &_item {
      flex: 1;
      margin-right: 0 !important;

      :deep(.el-col) {
        &:nth-child(4n) {
          padding-right: 0 !important;
        }
      }
    }

    &_btns {
      width: auto;

      :deep(.el-col) {
        margin-bottom: 10px;
      }
      &.expend {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        :deep(.el-col) {
          margin-bottom: 0;
        }
      }
    }
  }

  :deep(.el-input__wrapper) {
    width: calc(100% - 22px);
  }

  :deep(.el-select-v2) {
    width: 100%;
  }

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}
.table_header_line {
  margin: 20px 0;
}
</style>
